<div v-bind:class="[componentId, 'cly-vue-dashboards']">
    <template v-if="noSelectedDashboard">
        <!--
            If there are no dashbaords let us show NO DASHBOARDS view.
            But we must check if the dashbaord is in its initial loading state.
            If it is in its initial loading state, we must show a loading state.
        -->
        <cly-main v-if="!isInitLoad" class="bu-mt-6">
            <no-dashboard></no-dashboard>
        </cly-main>
        <cly-main v-else v-loading="isInitLoad" style="margin-top: 35%;"></cly-main>
    </template>
    <template v-else>
        <!--
            So we do have a dashboard. But is it empty or contains any widgets?
            If the dashboard is empty, lets us show a NO WIDGETS view.
            We must check here aswell if the dashboard is in loading state or not.
            If ineed it is a loading state, let us not show any action buttons to the user.

            In case widgets exist in the vuex but the dashboard is in initial loading state,
            let us pass the loading state to the grid component so that it shows loading state
            in the widgets aswell.

            If the dashboard is showing a NO WIDGET view and its still loading, that means
            there are no widgets in the dashboard and we have a selected dashboard avaiable.
            It was probably set as selected in some previous request.
            Its a valid state.
        -->
        <header>
            <div style="padding: 32px 32px 20px 32px;">
                <div class="bu-level">
                    <div class="bu-level-left bu-is-flex-shrink-1" style="min-width: 0;">
                        <div class="bu-level-item bu-is-flex-shrink-1" style="min-width: 0;">
                            <h2 class="has-ellipsis">{{dashboard.name}}</h2>
                        </div>
                    </div>
                    <div class="bu-level-right">
                        <div class="bu-level-item">
                            <cly-date-picker-g></cly-date-picker-g>
                        </div>
                        <template v-if="!isInitLoad">
                            <template v-if="!fullscreen">
                                <div class="bu-level-item" v-if="canUpdateGrid">
                                    <el-button @click="newWidget" type="success" icon="el-icon-circle-plus">{{i18n('dashboards.add-widget')}}</el-button>
                                </div>
                                <div class="bu-level-item">
                                    <cly-more-options @command="onDashboardAction($event, dashboard)">
                                        <el-dropdown-item command="fullscreen">{{i18n('dashboards.activate-full-screen')}}</el-dropdown-item>
                                        <el-dropdown-item command="edit" v-if="canUpdateGrid && canUpdateDashboard">{{i18n('common.edit')}}</el-dropdown-item>
                                        <el-dropdown-item v-if="canUpdateGrid"><a :href="'#/manage/reports/create/dashboard/' + dashboard._id">{{i18n('dashboards.create-email-reports')}}</a></el-dropdown-item>
                                        <el-dropdown-item command="duplicate" v-if="canUpdateGrid">{{i18n('dashboards.duplicate-dashboard')}}</el-dropdown-item>
                                        <el-dropdown-item command="delete" v-if="canUpdateGrid && canUpdateDashboard">{{i18n('common.delete')}}</el-dropdown-item>
                                    </cly-more-options>
                                </div>
                            </template>
                            <template v-else>
                                <div class="bu-level-item">
                                    <el-button @click="exitFullScreen" icon="el-icon-circle-close"></el-button>
                                </div>
                            </template>
                        </template>
                    </div>
                </div>
                <div class="bu-level bu-mt-2" v-if="dashboard.creation.time || dashboard.creation.by">
                    <div class="bu-level-left">
                        <div class="bu-level-item">
                            <div class="bu-level-item color-cool-gray-50 text-medium">
                                <span>
                                    <i class="far fa-clock"></i>
                                    {{i18nM('dashbaords.created')}}
                                </span>
                                <span v-if="dashboard.creation.time" class="bu-ml-1">
                                    {{dashboard.creation.time}}
                                </span>
                                <span v-if="dashboard.creation.by" class="bu-ml-1">
                                    {{i18n('dashbaords.created-by', dashboard.creation.by)}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <cly-main>
            <no-widget v-if="noWidgets && !isWidgetProcessing" :can-update="canUpdateGrid" @new-widget="newWidget"></no-widget>
            <dashboards-grid ref="grid" :loading="isInitLoad" :can-update="canUpdateGrid"></dashboards-grid>

            <dashboards-drawer :controls="drawers.dashboards"></dashboards-drawer>
            <widgets-drawer @add-widget="addWidgetToGrid" @reset="onReset" :controls="drawers.widgets"></widgets-drawer>
        </cly-main>
    </template>
</div>
